<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/common :: common_header"/>
<body>
<table data-toggle="topjui-datagrid"
       data-options="id:'clientList',
        idField:'clientId',
        pagination:true,
        url:'../../client/list',
        fitColumns:true,
        singleSelect:true,selectOnCheck:false,checkOnSelect:false">
    <thead>
    <tr>
        <th data-options="field:'',title:'复选框',checkbox:true"></th>
        <th data-options="field:'clientId',title:'client_id',width:100"></th>
        <th data-options="field:'clientSecret',title:'client_secret',width:100"></th>
        <th data-options="field:'scope',title:'scope',width:60"></th>
        <th data-options="field:'authorizedGrantTypes',title:'authorized_grant_types',width:300"></th>
        <th data-options="field:'webServerRedirectUri',title:'web_server_redirect_uri',width:300,
                         formatter:function(value,row,index){
                            return settingWebServerRedirectUriStyle(value,row);
                         }"></th>
        <th data-options="field:'operate',title:'操作',formatter:operateFormatter,width:80"></th>
    </tr>
    </thead>
</table>
<div id="clientList-toolbar" class="topjui-toolbar" data-options="grid:{type:'treegrid', id:'clientList', parentIdField:'pid'}">
    <a href="javascript:void(0)" onclick="addClientView()" data-toggle="topjui-menubutton" data-options="iconCls: 'fa fa-plus',btnCls: 'topjui-btn-green'">新增</a>
    <a href="javascript:void(0)" onclick="clientEdit()" data-toggle="topjui-menubutton" data-options="iconCls: 'fa fa-pencil-square-o', btnCls: 'topjui-btn-blue'">修改</a>
    <a href="javascript:void(0)" onclick="batchDeleteClient()" data-toggle="topjui-menubutton" data-options="btnCls:'topjui-btn-brown',iconCls:'fa fa-trash'">删除</a>
</div>
<form method="post" id="clientEditDialog"></form>


<script th:inline="javascript">
    //TODO: 获取项目上下文路径，记得需要在<script>标签中加入  th:inline="javascript" 属性配置，才可正常解析
    /*<![CDATA[*/
    var contextPath = /*[[@{/}]]*/;
    /*]]>*/

    /**
     * 设置列 webServerRedirectUri 的样式，加上超链接
     */
    function settingWebServerRedirectUriStyle(value,row){
        return "<a style=\"color:blue\" href=\"javascript:window.open('" + value + "');void(0);\">" + value + "</a>";
    }

    /**
     * 新增应用弹出框
     */
    function addClientView(){
        var $editDialog = $('#clientEditDialog');
        $editDialog.iDialog({
            title: '新增应用',
            width: 880,
            height: 400,
            closed: false,
            cache: false,
            method: "get",
            href: contextPath + 'client/view/add',
            modal: true,
            buttons: [{
                text: '保存',
                iconCls: 'fa fa-save',
                btnCls: 'topjui-btn-blue',
                handler: function () {
                    $('#clientEditDialog').iForm('submit', {
                        url: contextPath + "client/2", //这里的 -2 只是一个占位符，无业务意义
                        success: function (data) {
                            var data = eval('(' + data + ')');
                            if (data.code == 200) {
                                $('#clientList').iDatagrid('reload');
                                $.iMessager.alert('提示', '新增成功', 'messager-success');
                                $editDialog.iDialog('close');
                            } else {
                                $.iMessager.alert('提示', data.msg, 'messager-error');
                                $('#clientList').iDatagrid('reload');
                                $editDialog.iDialog('close');
                            }
                            $("body").append("<form method=\"post\" id=\"clientEditDialog\"></form>");
                        }
                    });
                }
            }, {
                text: '关闭',
                iconCls: 'fa fa-close',
                btnCls: 'topjui-btn-red',
                handler: function () {
                    $editDialog.iDialog('close');
                    $("body").append("<form method=\"post\" id=\"clientEditDialog\"></form>");
                }
            }]
        });
    }
    /**
     * 编辑应用
     */
    function clientEdit() {
        var clientCheckboxSelect = $("#clientList").treegrid("getChecked");
        if (clientCheckboxSelect == undefined || clientCheckboxSelect.length <= 0) {
            $.messager.alert("提示", "请选择一个应用", "messager-warning");
            return;
        }
        if (clientCheckboxSelect.length > 1) {
            $.messager.alert("提示", "只能选择一个应用", "messager-warning");
            return;
        }
        openEditDiag(clientCheckboxSelect[0].clientId);
    }

    /**
     * 操作一列的内容格式化
     */
    function operateFormatter(value, row, index) {
        var htmlstr = '<button class="layui-btn layui-btn-xs" onclick="openEditDiag(\'' + row.clientId + '\')">编辑</button>';
        htmlstr += '<button class="layui-btn layui-btn-xs layui-btn-danger" onclick="deleteClient(\'' + row.clientId + '\')">删除</button>';
        return htmlstr;
    }

    /**
     * 编辑应用
     */
    function openEditDiag(id) {
        var $editDialog = $('#clientEditDialog');
        $editDialog.iDialog({
            title: '应用编辑',
            width: 880,
            height: 400,
            closed: false,
            cache: false,
            method: "put",
            href: contextPath + 'client/' + id,
            modal: true,
            buttons: [{
                text: '保存',
                iconCls: 'fa fa-save',
                btnCls: 'topjui-btn-blue',
                handler: function () {
                    $('#clientEditDialog').iForm('submit', {
                        url: contextPath + "client/1",
                        success: function (data) {
                            var data = eval('(' + data + ')');
                            if (data.code == 200) {
                                $.iMessager.alert('提示', '操作成功', 'messager-success');
                                $('#clientList').iDatagrid('reload');
                                //tabMenuOprate(null,6);
                                $editDialog.iDialog('close');
                            } else {
                                $.iMessager.alert('提示', '系统错误，请稍后重试', 'messager-error');
                                $('#clientList').iDatagrid('reload');
                                $editDialog.iDialog('close');
                            }
                            $("body").append("<form method=\"post\" id=\"clientEditDialog\"></form>");
                        }
                    });
                }
            }, {
                text: '关闭',
                iconCls: 'fa fa-close',
                btnCls: 'topjui-btn-red',
                handler: function () {
                    $editDialog.iDialog('close');
                    $("body").append("<form method=\"post\" id=\"clientEditDialog\"></form>");
                }
            }]
        });
    }

    /**
     * 批量删除
     */
    function batchDeleteClient() {
        var clientCheckboxSelect = $("#clientList").treegrid("getChecked");
        if (clientCheckboxSelect == undefined || clientCheckboxSelect.length <= 0) {
            $.messager.alert("提示", "请选择应用", "messager-warning");
            return;
        }
        var clientIdArr = [];
        for(var i = 0; i < clientCheckboxSelect.length; i++){
            clientIdArr.push(clientCheckboxSelect[i].clientId);
        }
        deleteClient(clientIdArr.join(","));
    }
    /**
     * 删除应用
     */
    function deleteClient(id) {
        $.iMessager.confirm('提示', '确定要删除吗?<p style="color: red;margin-top: 8px;">请慎重操作，删除后可能会影响相关系统的正常运行！如若没有特殊需求，请勿轻易删除！</p>', function (r) {
            if (r) {
                $.ajax({
                    url: contextPath + "client/batch", //路径
                    type: "post",
                    data: {
                        "clientId": id
                    },
                    dataType: 'json',
                    success: function (data) {
                        if (data.code == 200) {
                            $.iMessager.alert('提示', '删除成功', 'messager-success');
                            $('#clientList').iDatagrid('reload');
                        } else {
                            $.iMessager.alert('提示', '系统错误，请稍后重试', 'messager-error');
                        }
                    }
                });
            }
        });
    }
</script>
</body>
</html>